<template>
  <div class="page-box">
    <dataList
      placeholder="请输入物业名称"
      :pageInfo="pager"
      :listData="tableData"
      :selectData="selectionList"
      searchName="projectName"
      :menuList="[{test:'退款'},{test1:'开收据'},{test2:'打印押金'},'export']"
      :filterList="filterList"
      @menu-click="handleMenuClick"
      openSelection
    >
      <el-table :data="tableData" align="center" @selection-change="$event => (selectionList = $event)">
        <el-table-column width="60px" fixed type="selection"></el-table-column>
        <el-table-column label="物业名称" align="center" prop="projectName" width="200"></el-table-column>
        <el-table-column label="面积（m²）" align="center" prop="buildingArea" width="100"></el-table-column>
        <el-table-column label="费用对象" align="center" prop="costProjectName" width="200"></el-table-column>
        <el-table-column label="收费项目" align="center" prop="chargeProjectName" width="200"></el-table-column>
        <el-table-column label="应收日期" align="center" prop="receivableDate" width="100"></el-table-column>
        <el-table-column label="费用期间" align="center" prop="costPeriodStart" width="200">
          <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
        </el-table-column>
        <el-table-column label="应收金额" align="center" prop="receivableMoney" width="100"></el-table-column>
        <el-table-column label="实收金额" align="center" prop="collectionAmount" width="100"></el-table-column>
      </el-table>
    </dataList>
    <edit-refund ref="editRefund"></edit-refund>
    <billData ref="billData"></billData>
    <depositsData ref="depositsData"></depositsData>
    <receiptData ref="receiptData"></receiptData>
    <lead-data ref="leadData"></lead-data>
  </div>
</template>

<script src="./index.js"></script>
<style scoped lang="scss">
@import "./index";
</style>

